<html>
<head>
<title>Collapsible List 3</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$(function(){
		$('li')
		.css('pointer','default')
		.css('list-style-image','none');
		$('li:has(ul)')
		.click(function(event){
			if (this == event.target) {
			$(this).css('list-style-image',
			(!$(this).children().is(':hidden')) ?
			'url(plus.gif)' : 'url(minus.gif)');
			$(this).children().toggle('slow');
			}
			return false;
		})
		.css({cursor:'pointer',
		'list-style-image':'url(plus.gif)'})
		.children().hide();
		$('li:not(:has(ul))').css({
			cursor: 'default',
			'list-style-image':'none'
		});
	});
</script>
<body>
<fieldset><legend>Collapsible List &mdash; Take 3</legend>
Showing and hiding elements 129
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3
	<ul>
		<li>Item 3.1</li>
		<li>Item 3.2
		<ul>
			<li>Item 3.2.1</li>
			<li>Item 3.2.2</li>
			<li>Item 3.2.3</li>
		</ul>
		</li>
		<li>Item 3.3</li>
	</ul>
	</li>
	<li>Item 4
	<ul>
		<li>Item 4.1</li>
		<li>Item 4.2
		<ul>
			<li>Item 4.2.1</li>
			<li>Item 4.2.2</li>
		</ul>
		</li>
	</ul>
	</li>
	<li>Item 5</li>
</ul>
</fieldset>
</body>
</html>